var wkid = 4326;
var token = "44757c5cb4d96f74d897dc4ba430ffa3";
//创建天地图影像底图
var layerTianDiImg = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: getLayerUrlByData('image', wkid, token),
        projection: 'EPSG:' + wkid,
        wrapX: true,
        crossOrigin: 'anonymous'
    })
});
/*
 * 获取在线天地图
 * type:获取的瓦片类型，影像、矢量
 * wkid:坐标系
 * token:官网申请的开发者token
 */
function getLayerUrlByData(type, wkid, token) {
    var url = '', layerId, tileMatrixSetId;
    if (type === 'image') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "img_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'label') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "cia_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'street') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "vec_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    } else if (type === 'street_label') {
        url = 'http://t{1-7}.tianditu.com/DataServer?';
        layerId = "cva_";
        tileMatrixSetId = wkid === 4326 ? 'c' : "w";
    }
    return url + 'T=' + layerId + tileMatrixSetId + '&x={x}&y={y}&l={z}&tk=' + token;
}

const raster = new ol.layer.Tile({
    source: new ol.source.OSM(),
});

const source = new ol.source.Vector({wrapX: false});

const vector = new ol.layer.Vector({
    source: source,
});

const map = new ol.Map({
    layers: [layerTianDiImg, vector],
    target: 'map',
    // view: new ol.View({
    //     center: [-11000000, 4600000],
    //     zoom: 4,
    // }),
    view: new ol.View({
        center: ol.proj.fromLonLat([113.4491, 22.9156]),
        zoom: 13
    })
});

// const typeSelect = document.getElementById('type');
//
// let draw; // global so we can remove it later
// function addInteraction() {
//     const value = typeSelect.value;
//     if (value !== 'None') {
//         draw = new ol.interaction.Draw({
//             source: source,
//             type: typeSelect.value,
//         });
//         map.addInteraction(draw);
//     }
// }
//
// /**
//  * Handle change event.
//  */
// typeSelect.onchange = function () {
//     map.removeInteraction(draw);
//     addInteraction();
// };
//
// document.getElementById('undo').addEventListener('click', function () {
//     draw.removeLastPoint();
// });
//
// addInteraction();